<template>
  <div class="addui">
    <div
      v-bind:class="{active:isFixed}"
      class="add-fix">
      <h3 class="add-title">新建{{state[codeType]['Name']}}</h3>
      <div id="editor"></div>
      <ul class="add-console">
        <h3 class="add-console-til">选择代码类型</h3>
        <li class="add-console-ite" @click="codeType=1">CSS</li>
        <li class="add-console-ite" @click="codeType=2">HTML</li>
        <li class="add-console-ite" @click="codeType=3">JavaScript</li>
      </ul>
    </div>
    <div class="add-main">
      <input type="text" class="add-name" placeholder="请在这里输入标题" v-model="codeTitel">
      <div id="text"></div>
      <textarea class="add-code" v-on:input="input">{{codeContent}}</textarea>
    </div>
    <div class="add-floor">
      <div class="add-floor-wra">
        <span class="add-floor-sub" @click="submit">提交</span>
      </div>
    </div>
  </div>
</template>

<script>
import Wang from 'wangeditor'
import $ from 'jquery'
import wangconfig from '../../config/wangeditor.config.js'

export default {
  name: 'addui',
  data () {
    return {
      name: 'testname',
      state: {
        '1': {'Id': 1, 'Name': 'CSS'},
        '2': {'Id': 2, 'Name': 'HTML'},
        '3': {'Id': 3, 'Name': 'JavaScript'}
      },
      editor: '',
      isFixed: false,
      codeType: 1,
      codeTitel: '',
      codePresentation: '',
      codeContent: `<div>你好</div>`,
      code1: '',
      code2: ''
    }
  },
  methods: {
    input (e) {
      var str = e.target.value
      var str1 = e.target.outerText
      var str2 = e.target.innerHtml
      this.codeContent = str
      this.code1 = str1
      this.code2 = str2
      console.log(e)
    },
    submit () {
      var json = {
        codename: this.codeTitel,
        codeintro: this.codePresentation,
        codetype: this.codeType + '',
        codecontent: this.codeContent
      }
      this.$http.post('http://localhost:3000/code/save', json).then(res => {
        console.log(res, '成功')
      }, res => {
        // error callback
        console.log(res, '失败')
      })
    },
    // 创建富文本
    createEditor () {
      this.editor = new Wang('#editor', '#text')
      this.editor.customConfig.menus = wangconfig.menus
      this.editor.customConfig.zIndex = wangconfig.zIndex
      this.editor.create()
    },
    // 设置菜单栏吸顶
    setFixed () {
      var top = document.body.scrollTop
      if (top >= this.setTop) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    },
    initFixed () {
      this.fixed = $('.add-fix')
      this.fixedTop = this.fixed.offset().top

      this.setTop = this.fixedTop
    }
  },
  components: {

  },
  created () {
    console.log($)
  },
  mounted () {
    var that = this
    this.createEditor()
    this.initFixed()
    window.onscroll = function () {
      that.setFixed()
    }
  }
}
</script>

<style>
@import './addui.css'
</style>
